<!DOCTYPE html>
<html>
<head>
<title>Fig. 2.29 Energy Levels of 20Ne</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="650"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Style settings ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 1.2;
  ctx.font = '16px sans-serif';
  ctx.textBaseline = 'middle';

  // --- Layout and Scaling ---
  const y_base = 600; // y-coordinate for E=0
  const y_top = 50;  // y-coordinate for max energy
  const max_E = 12;  // MeV
  const scale = (y_base - y_top) / max_E; // pixels per MeV

  function y(E) {
    return y_base - E * scale;
  }

  const x_ne_box_left = 260;
  const x_ne_box_right = 380;

  // --- Helper function to draw an energy level line ---
  function drawLevel(E, x_start, x_end) {
    const y_pos = y(E);
    ctx.beginPath();
    ctx.moveTo(x_start, y_pos);
    ctx.lineTo(x_end, y_pos);
    ctx.stroke();
    return y_pos;
  }

  // --- Draw the main box for 20Ne levels ---
  ctx.beginPath();
  ctx.moveTo(x_ne_box_left, y(0));
  ctx.lineTo(x_ne_box_left, y(11.2));
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(x_ne_box_right, y(0));
  ctx.lineTo(x_ne_box_right, y(11.2));
  ctx.stroke();

  // --- Draw 20Ne Energy Levels ---
  // 0+ Ground State
  const y0 = drawLevel(0, x_ne_box_left, x_ne_box_right);
  ctx.textAlign = 'right';
  ctx.fillText('0⁺', x_ne_box_left - 15, y0);
  ctx.textAlign = 'left';
  ctx.fillText('0', x_ne_box_right + 10, y0);

  // 2+ State
  const y_1_63 = drawLevel(1.63, x_ne_box_left, x_ne_box_right);
  ctx.textAlign = 'right';
  ctx.fillText('2⁺', x_ne_box_left - 15, y_1_63);
  ctx.textAlign = 'left';
  ctx.fillText('1.63', x_ne_box_right + 10, y_1_63);

  // 3- T=0 State
  const y_10_838 = drawLevel(10.838, x_ne_box_left, x_ne_box_right);
  ctx.textAlign = 'right';
  ctx.fillText('3⁻ T = 0', x_ne_box_left - 15, y_10_838);
  ctx.textAlign = 'left';
  ctx.fillText('10.838', x_ne_box_right + 10, y_10_838);

  // 3+ T=1 State
  const y_10_890 = drawLevel(10.890, x_ne_box_left, x_ne_box_right);
  ctx.textAlign = 'right';
  ctx.fillText('3⁺ T = 1', x_ne_box_left - 15, y_10_890);
  ctx.textAlign = 'left';
  ctx.fillText('10.890', x_ne_box_right + 10, y_10_890);

  // --- Draw "many levels" and the brace ---
  const many_levels_top_E = 9.8;
  const many_levels_bottom_E = 5.5; 
  drawLevel(many_levels_bottom_E, x_ne_box_left, x_ne_box_right);
  drawLevel(many_levels_bottom_E + 0.8, x_ne_box_left, x_ne_box_right);
  drawLevel(many_levels_top_E - 0.8, x_ne_box_left, x_ne_box_right);
  drawLevel(many_levels_top_E, x_ne_box_left, x_ne_box_right);

  const brace_line_x = x_ne_box_right + 2;
  const brace_y_top = y(many_levels_top_E + 0.5);
  const brace_y_bottom = y(many_levels_bottom_E - 0.5);
  ctx.beginPath();
  ctx.moveTo(brace_line_x, brace_y_top);
  ctx.lineTo(brace_line_x, brace_y_bottom);
  ctx.stroke();

  const brace_x = brace_line_x + 5;
  const brace_mid_y = (brace_y_top + brace_y_bottom) / 2;
  const brace_tip_x = brace_x + 10;
  ctx.beginPath();
  ctx.moveTo(brace_x, brace_y_top);
  ctx.quadraticCurveTo(brace_tip_x, brace_y_top, brace_tip_x, brace_mid_y);
  ctx.quadraticCurveTo(brace_tip_x, brace_y_bottom, brace_x, brace_y_bottom);
  ctx.stroke();
  
  ctx.textAlign = 'left';
  ctx.fillText('many levels', brace_tip_x + 8, brace_mid_y);

  // --- Label for 20Ne ---
  ctx.textAlign = 'center';
  ctx.fillText('²⁰Ne', (x_ne_box_left + x_ne_box_right) / 2, y0 + 25);

  // --- Draw other levels ---
  // 16O + alpha
  const x_left_start = 80;
  const x_left_end = 220;
  const y_4_730 = drawLevel(4.730, x_left_start, x_left_end);
  ctx.textAlign = 'center';
  ctx.fillText('¹⁶O + α', (x_left_start + x_left_end) / 2, y_4_730 - 15);
  ctx.textAlign = 'left';
  ctx.fillText('4.730', x_left_end + 5, y_4_730);

  // --- Right side reaction threshold levels ---
  const right_label_x = 480;
  const right_line_len = 120;

  // 19F + 3He - d
  const y_7_350 = y(7.350);
  ctx.textAlign = 'center';
  ctx.fillText('¹⁹F + ³He - d', right_label_x, y_7_350 - 10);
  ctx.beginPath();
  ctx.moveTo(right_label_x - right_line_len / 2, y_7_350);
  ctx.lineTo(right_label_x + right_line_len / 2, y_7_350);
  ctx.stroke();
  ctx.textAlign = 'left';
  ctx.fillText('7.350', right_label_x + right_line_len / 2 + 10, y_7_350);

  // 19F + d - n
  const y_10_620 = y(10.620);
  ctx.textAlign = 'center';
  ctx.fillText('¹⁹F + d - n', right_label_x, y_10_620 - 10);
  ctx.beginPath();
  ctx.moveTo(right_label_x - right_line_len / 2, y_10_620);
  ctx.lineTo(right_label_x + right_line_len / 2, y_10_620);
  ctx.stroke();
  ctx.textAlign = 'left';
  ctx.fillText('10.620', right_label_x + right_line_len / 2 + 10, y_10_620);

  // --- Draw the dashed lines with arrows ---
  ctx.save();
  ctx.setLineDash([5, 4]);
  ctx.lineWidth = 1;
  
  const drawSimpleArrow = (ctx, x1, y1, x2, y2) => {
      const midX = (x1 * 0.45 + x2 * 0.55); // place arrow around the middle
      const midY = (y1 * 0.45 + y2 * 0.55);
      const angle = Math.atan2(y2 - y1, x2 - x1);
      const arrowSize = 8;
      const arrowAngle = Math.PI / 7;
      
      ctx.save();
      ctx.setLineDash([]); // Make arrow solid
      ctx.beginPath();
      ctx.moveTo(midX + arrowSize * Math.cos(angle + arrowAngle), midY + arrowSize * Math.sin(angle + arrowAngle));
      ctx.lineTo(midX, midY);
      ctx.lineTo(midX + arrowSize * Math.cos(angle - arrowAngle), midY + arrowSize * Math.sin(angle - arrowAngle));
      ctx.stroke();
      ctx.restore();
  };

  const startX = x_ne_box_left;
  const endX_base = (x_left_start + x_left_end) / 2;
  const endY_base = y_4_730;

  // Line from 3+
  const startY1 = y_10_890;
  const endX1 = endX_base + 30;
  const endY1 = endY_base + 5;
  ctx.beginPath();
  ctx.moveTo(startX, startY1);
  ctx.lineTo(endX1, endY1);
  ctx.stroke();
  drawSimpleArrow(ctx, startX, startY1, endX1, endY1);

  // Line from 3-
  const startY2 = y_10_838;
  const endX2 = endX_base + 10;
  const endY2 = endY_base - 5;
  ctx.beginPath();
  ctx.moveTo(startX, startY2);
  ctx.lineTo(endX2, endY2);
  ctx.stroke();
  drawSimpleArrow(ctx, startX, startY2, endX2, endY2);

  ctx.restore();

  // --- Final caption ---
  ctx.font = '16px serif';
  ctx.textAlign = 'center';
  ctx.fillText('Fig. 2.29', canvas.width / 2, y_base + 35);

</script>
</body>
</html>